*{margin: 0;padding: 0;}
html{font-size: 18px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button
form,fieldset,select,input,textarea,p,blockquote,th,td { padding: 0; margin: 0;}
ul,ul li,i{list-style: none;} 
i{font-style:normal}
th{font-weight:200;}
button{border: none;font-size: 0.5rem;background: transparent;}
input, button, textarea {outline: none;-webkit-appearance: none;border-radius: 0;border: none;}

table{border-collapse: collapse;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%}   
a{text-decoration:none;color: inherit;display: inline-block;}
input{border: none;font-size: 0.9rem;}
input::-webkit-input-placeholder{color: #CBCBCB;}
textarea{width: 100%; border: 1px solid #BFBFBF;padding: 5px; font-size:16px;color: #505050}
textarea::-webkit-input-placeholder{color: #CBCBCB;}
/*input{font-size:1rem;height: 10px;line-height: 10px;}
input[type="checkbox"]{width: 12px;height:12px;border: 1px solid #999; background: #fff;vertical-align: middle;}
input[type="checkbox"]:checked{background: #fff url(../images/select2.png) no-repeat; background-size: 150%;background-position: center;}
input[type="radio"]{width: 10px;height:10px;border: 1px solid #999; border-radius: 50%; background: #fff;vertical-align: middle;}
input[type="radio"]:checked{background: #fff url(../images/select.png) no-repeat; background-size: 150%;background-position: center;}
*/
@font-face {
	font-family:"郑庆科黄油体";
	src: url(../fonts/郑庆科黄油体.TTF);
}
@font-face {
	font-family:"FZZYJW";
	src: url(../fonts/FZZYJW.TTF);
}
.orange{color: #FF6F0F;}
.back{ position: absolute;left: 0; display: inline-block;height: 3rem;width:3rem; float: left;background: url(../images/back.png) no-repeat;background-size: 3rem 3rem;}

/*select*/
.dialogueTitle select{width: 5.2rem; border: none;padding: 0.3rem 0.5rem;color: #fff;background:linear-gradient(180deg,rgba(19,91,179,1),rgba(84,149,229,1),rgba(25,231,255,1));
border-radius:4px;font-size: 0.5rem;}
.dialogueTitle select:focus{border: none;outline-color:inherit}
.dialogueTitle option{color: #135BB3;font-size: inherit;}
.dialogueTitle option:focus{border: none;outline-color:inherit}

.betNumItem select{width: 3rem; border:1px solid #BFBFBF;padding: 0.3rem;color: #505050;}
.betNumItem select:focus{border: none;outline-color:inherit}
.betNumItem option{color: #135BB3;font-size: 0.5rem;}
.betNumItem option:focus{border: none;outline-color:inherit}

/*登录*/
.warpBox{width: 100%;}
.detailsBox{width: 100%;background:#F7F7F7;position: absolute;z-index: -10;
	background-size: 100% 100%;min-height: 100%;}
.indexBox{width: 100%;background:#eee;position: absolute;z-index: -10;
	background-size: 100% 100%;min-height: 100%;}
.warpBox .headerBox{ background: #fff; width: 100%;height: 3rem;line-height: 3rem;font-size: 0.9rem; text-align: center;color: #505050;}

.mainBox{padding: 2rem;}

/*loginBox*/
.loginBox{margin-top: 5rem; width: 100%;}
.loginBox .loginItem{margin-bottom: 1.2rem; display: flex;justify-content: flex-start;align-items: center; border-bottom: 1px solid #EEEEEE;padding: 0.5rem 1rem;}
.loginItem .icon{margin-right: 0.5rem; width: 1.5rem;height: 1.5rem;}
.loginItem .icon img{width: 100%;height: 100%;}
.loginBox .btnBox{margin-top: 2.5rem; width: 100%;text-align: center; height: 2.5rem;line-height: 2.5rem; background:#018FFB ;}
.btnBox .loginBtn{ color: #fff;font-size: 0.9rem;}

/*selectBox*/
.selectBox{width: 100%;}
.selectBox .titleBox{position: relative;height: 14rem;}
.titleBox .bg{position: absolute;z-index: -1;width: 100%;height: 100%;}

.titleBox .countBox{font-family: "FZZYJW";text-shadow: 1px 1px 1px #009F95; width: 100%;text-align: center; position: absolute;top: 9%;color: #000000;font-size: 1.2rem;}
.titleBox .count{font-family: "PingFang-SC-Bold";color: #B7FFFF;}
.titleBox .border{width: 5rem;height: 0.1rem;position: absolute;top: 22%;left: 25%;background: #000;border-radius: 200px; filter: blur(4px);}



.titleBox .before{position: absolute;top: 0.5rem;right: 0.5rem;font-size: 0.5rem; padding: 0.3rem 0.5rem;background:linear-gradient(180deg,rgba(227,227,227,1),rgba(255,255,255,1));border-radius:4px;}
.boxBox{width: 100%; position: absolute;top: 32%;}
.boxBox .boxList{padding: 0 2rem; display: flex;justify-content: space-around;align-items: center;}
.boxList .boxItem{width: 15%;position: relative;}
.boxList .boxItem img{ width: 100%;height: 100%;}
.boxList .boxItem .num{font-size: 0.8rem; position: absolute;top: 28%;left:32%;}
.timeBox{position: absolute;width: 100%;text-align: center; top: 60%;color: #fff;font-size: 0.6rem;}
.timeBox .time{text-align: center; margin-top: 0.7rem; font-family: "郑庆科黄油体";font-size: 1.2rem;}



/*dialogueBox*/
.dialogueBox .dialogueTitle{padding:0.5rem 1rem; background: #fff;}
.ruleBtn{display: inline-block; padding: 0.3rem 0.5rem;background:linear-gradient(180deg,rgba(19,91,179,1),rgba(84,149,229,1),rgba(25,231,255,1));
border-radius:4px;color:#fff;text-align: center;font-size: 0.5rem;}
.detailBtn{display: inline-block; padding: 0.3rem 0.5rem;background:linear-gradient(180deg,rgba(19,91,179,1),rgba(84,149,229,1),rgba(25,231,255,1));
border-radius:4px;color:#fff;text-align: center;font-size: 0.5rem;}
.dialogueBox .integral{margin-top: 0.3rem; float: right; font-size: 0.7rem;color: #505050;}

/*dialogueList*/
.dialogueList{padding: 1rem 1rem 0; margin-bottom: 5rem}
.dialogueList .dialogueItem{margin-bottom: 0.5rem;display: flex;justify-content: flex-start;align-items: center;}
.dialogueItem .portraitBox{ width: 16%;text-align: center;font-size: 0.5rem;color: #505050;}
.dialogueItem .portraitBox2{ width: 16%;text-align: center;font-size: 0.5rem;color: #505050;}
.portraitBox .portraitImg{width: 3rem;height: 3rem;border-radius: 50%;}
.portraitBox2 .portraitImg{width: 3rem;height: 3rem;border-radius: 50%;}
.bubbleBox{position: relative; font-size: 0.75rem;color: #505050;background: #fff;
width: 70%; height: 100%; padding: 0.5rem;border-radius: 12px;}
.bubbleBox:after{content:'';position:absolute;right:100%;top:-2px;width:15px;height:40px;
border-width:0;border-style:solid;border-color:transparent;margin-right:-2px;
border-bottom-width:10px;border-bottom-color:currentColor;border-radius:0 0 0 148px;color:#fff;}

.bubbleBox2{position: relative; font-size: 0.75rem;color: #505050;background: #7ecef4;
width: 70%;height: 100%; padding: 0.5rem;border-radius: 12px;}
.bubbleBox2:after{content:'';position:absolute;left:100%;top:-2px;width:15px;height:20px;
border-width:0;border-style:solid;border-color:transparent;margin-right:-2px;
border-bottom-width:10px;border-bottom-color:currentColor;border-radius: 0 0 148px 0;color:#7ecef4;}
.bubbleBox3:after{top:-22px}
.dialogueFoot{position: fixed;bottom: 0; width: 100%;height: 3rem;display: flex;align-items: center; background: #fff;}
.dialogueFoot .dialogueInput{padding-left: 2%; font-size: 0.6rem; width: 73%;height:2rem;margin: 0.5rem 0; margin-right: 4%;margin-left: 3%; background: #eee;}
.dialogueFoot .betBtn{width:15%;margin-right: 3%; font-size:0.6rem;border-radius:4px; height: 2rem;line-height: 2rem;text-align: center; background: #FF6F0F;color: #fff;}

.dialogueFoot2{position: fixed;bottom: 0; width: 100%;height: 3rem;display: flex;align-items: center; background: #fff;}
.dialogueFoot2 .dialogueInput{padding-left: 2%;font-size: 0.6rem; width: 73%;height:2rem;margin: 0.5rem 0; margin-right: 4%;margin-left: 3%; background: #eee;}
.dialogueFoot2 .betBtn{width:15%;margin-right: 3%; font-size:0.6rem;border-radius:4px; height: 2rem;line-height: 2rem;text-align: center; background: #999999;color: #fff;}




.betNum{margin-top: 1rem;}
.betNum .betBtn{font-size:0.9rem;border-radius:10px; height: 2rem;line-height: 2rem;text-align: center; background: #FF6F0F;color: #fff;}

/*自定义弹窗*/
.beforeLayer{padding:0.5rem 1rem;font-size: 0.6rem;color: #505050;}
.beforeLayer .beforeList{width: 100%;text-align: center;}
.beforeList .beforeItem{padding: 0.5rem 0;}

.betLayer{padding:0.5rem 1rem;color: #505050;}
.betTitle .title{font-size: 0.8rem;}
.betTitle .tip{margin-top: 0.4rem; font-size: 0.6rem;color: #FF6F0F;}
.betTitle .betNumBox{margin-top: 0.6rem;font-size: 0.8rem;}
.betNumList{display: flex;justify-content: flex-start;flex-wrap: wrap;}
.betNumList .betNumItem{margin: 0.5rem;}
.betNumBox .betNumTitle{margin-bottom: 0.2rem;}
.betNumBox .inputBox{margin-top: 1rem;}
.betNumBox .inputBox input{width: 94%; padding: 0.5rem;background:#EEEEEE;font-size: 0.5rem;}


/*detailBox*/
.detailBox{font-size: 0.8rem;color: #505050;}
.detailTitle{text-align: center; background: #fff;margin-bottom: 1rem;padding:1rem;border-radius:5px;}
.detailTitle .total{font-size: 2rem;}
.detailTitle .tip{font-size: 0.5rem;}
.detailList{margin: 1rem;; background: #fff;border-radius:5px;}
.detailList .detailt{border-bottom: 1px solid #EEEEEE;padding: 1rem;}
.detailList .detailItem{ color: #575757; border-bottom: 1px solid #EEEEEE;padding: 1rem;display: flex;justify-content: space-between;align-items: center;}
.detailList .detailItem:last-child{border-bottom:none}
.detailList .detailItem .detailLeft{font-size: 0.8rem;}
.detailList .detailItem .detailRight{font-size: 1rem;}
.detailBox .btnBox{ border-radius: 4px; width: 100%;background: #fff;height: 2.5rem;line-height: 2.5rem; 
margin-top: 2rem; text-align: center;}
.none{display: none;}

@media screen and (max-width: 320px) {
    html{font-size: 100%}
    .boxList .boxItem .num{top: 26%;left:30%;}
    .timeBox{top: 60%;}
}
@media screen and (min-width: 321px )and (max-width: 399px) {
    html{font-size: 110%}
    .boxList .boxItem .num{top: 27%;left:32%;}
    .timeBox{top: 60%;}
}
@media screen and (min-width: 400px )and (max-width: 499px) {
    html{font-size: 130%}
   .boxList .boxItem .num{top: 27%;left:32%;}
   .timeBox{top: 60%;}
}
@media screen and (min-width: 500px )and (max-width: 557px) {
 html{font-size: 150%}
   .boxList .boxItem .num{top: 27%;left:33%;}
   .timeBox{top: 62%;left: 38%;}
}
@media screen and (min-width: 558px )and (max-width: 699px) {
 html{font-size: 170%}
   .boxList .boxItem .num{top: 28%;left:34%;}
   .timeBox{top: 63%;}
}
@media screen and (min-width: 700px )and (max-width: 999px) {
    html{font-size: 180%}
    .titleBox .border{left: 30%;}
    .titleBox .count{left: 30%;}
    .boxList .boxItem{width: 12%;}
/*    .boxList .boxItem .num{top: 0.85rem;left: 0.85rem;}*/
    .timeBox{top: 63%;}
}
@media screen and (min-width: 1000px)and (max-width: 1024px) {
    html{font-size: 200%}
    .titleBox .border{left: 30%;}
    .titleBox .count{left: 30%;}
    .boxList .boxItem{width: 10%;}
/*    .boxList .boxItem .num{top: 0.55rem;left: 0.65rem;}*/
    .timeBox{top: 64%;}
}
@media screen and (min-width: 1024px){
    html{font-size: 240%}
    .titleBox .border{left: 30%;}
    .titleBox .count{left: 30%;}
    .boxList .boxItem{width: 10%;}
/*    .boxList .boxItem .num{top: 0.55rem;left: 0.65rem;}*/
    .timeBox{top: 64%;}
}

